<template>
  <div class="danren">
    <div class="main">
      <div class="btns">
        <el-button @click="level('chuji')">初级</el-button>
        <el-button @click="level('zhongji')">中级</el-button>
        <!-- <el-button @click="level('gaoji')">高级</el-button> -->
        <el-button @click="reset">重置</el-button>
      </div>
      <div class="space" ref="space">
        <div
          class="lei_box"
          v-for="(item, index) in block"
          :key="index"
        >
          <div v-for="(i, idx) in item" :key="idx" @click="leftClick(index, idx)" @contextmenu.prevent="rightClick(index, idx)">
            <div class='bg' v-if="!i.show" :class="i.bg == 1 ? 'bg-lei' : i.bg == 2 ? 'bg-wenhao' : ''">

            </div>
            <div class='content' v-if="i.show" :class="i.num == 'lei' ? 'bg-lei' : ''">
              {{ i.num == 'lei' || i.num == 0 ? '' : i.num}}
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DanRen",
  data() {
    return {
      space: {
        row: 9,
        column: 9,
        lei: 10
      },
      block: [],
      leisXY: []
    };
  },
  created() {
    this.initBlock()
    this.initLeisXY()
    this.blockAddleis()
    this.countBlockNum()
  },
  mounted() {
    // this.$refs.space.style.width = this.space.row * 22 + "px";
  },
  methods: {
    reset(){
      this.block = []
      this.leisXY = []
      this.initBlock()
      this.initLeisXY()
      this.blockAddleis()
      this.countBlockNum()
    },
    initBlock(){
      for (let i = 0; i < this.space.row; i++) {
        this.block.push([])
        for (let j = 0; j < this.space.column; j++) {
          this.block[i].push({
            r: i,
            c: j,
            bg: 0,
            show: false,
            num: 0,
          });
        }
      }
      console.log(this.block)
    },
    initLeisXY(){
      let max = this.space.row * this.space.column
      let min = 0
      let leis = []
      //初级的时候，把10个雷对应的数字（0-80之间对应的哪个)选出来
      while(leis.length < this.space.lei){
        let randNum = parseInt(Math.random()*(max-min+1)+min,10)
        let flag = false
        leis.forEach(item => {
          if(item == randNum){
            flag = true
            return false
          }
        });
        if(!flag){
          leis.push(randNum)
        }
      }
      //雷的坐标
      let len = leis.length
      leis.forEach(item => {
        let x = parseInt(item / this.space.row)
        let y = item % this.space.row
        this.leisXY.push([x, y])
      })
      
    },
    blockAddleis(){
      this.leisXY.forEach(item =>{
        this.block[item[0]][item[1]].num = 'lei'
      })
    },
    countBlockNum(){
      this.leisXY.forEach(item => {
        let [x, y] = item;
        if(this.block[x - 1]){
          if(this.block[x - 1][y].num != 'lei') this.block[x - 1][y].num += 1
          if(this.block[x - 1][y - 1]){
            if(this.block[x - 1][y - 1].num != 'lei') this.block[x - 1][y - 1].num += 1
          }
          if(this.block[x - 1][y + 1]){
            if(this.block[x - 1][y + 1].num != 'lei') this.block[x - 1][y + 1].num += 1
          }
        }

        if(this.block[x + 1]){
          if(this.block[x + 1][y].num != 'lei') this.block[x + 1][y].num += 1
          if(this.block[x + 1][y - 1]){
            if(this.block[x + 1][y - 1].num != 'lei') this.block[x + 1][y - 1].num += 1
          }
          if(this.block[x + 1][y + 1]){
            if(this.block[x + 1][y + 1].num != 'lei') this.block[x + 1][y + 1].num += 1
          }
        }

        if(this.block[x][y - 1]){
          if(this.block[x][y - 1].num != 'lei') this.block[x][y - 1].num += 1
        }
        if(this.block[x][y + 1]){
          if(this.block[x][y + 1].num != 'lei') this.block[x][y + 1].num += 1
        }
      })
    },
    level(txt) {
      if (txt == "chuji") {
        this.space = {
          row: 9,
          column: 9,
          lei: 10
        }
        this.reset()
      }else if(txt == "zhongji"){
        this.space = {
          row: 16,
          column: 16,
          lei: 40
        }
        this.reset()
      }else{
        this.space = {
          row: 30,
          column: 16,
          lei: 100
        }
        this.reset()
      }
      
    },
    leftClick(x, y) {
      if(this.block[x][y].num == 'lei' && !this.block[x][y].show){
        this.block.forEach((item,index,arr)=>{
          item.forEach((i,idx)=>{
            this.block[index][idx].show = true
          })
        })
        return
      }
      if(!this.block[x][y].show) this.block[x][y].show = true
      if(this.block[x][y].num === 0){
        //展开0
        this.openZero(x, y)
      }

    },
    rightClick(x, y) {
      if(!this.block[x][y].show){
        this.block[x][y].bg = (this.block[x][y].bg + 1) % 3
      }
    },
    openZero(x, y){
      for(let i = 0; i < 3; i ++){
        let newX = x + i - 1
        if(newX >= 0 && newX <= this.space.row - 1 ){
          for(let j = 0; j < 3; j ++){
            let newY = y + j - 1
            //不判断!this.block[newX][newY].show会出现死循环
            if(newY >= 0 && newY <= this.space.column - 1 && !this.block[newX][newY].show){
              this.block[newX][newY].show = true
              if(this.block[newX][newY].num === 0){
                this.openZero(newX, newY)
              }
            }
          }
        }
      }
      // console.log(this.openZero)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.lei_box{
  display: flex;
  div{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #666;
    text-align: center;
    .bg{
      background-color: #aaa;
    }
    .bg-lei{
      background-image: url('../assets/炸弹.png');
      background-repeat: no-repeat;
      background-position: center center;
    }
    .bg-wenhao{
      background-image: url('../assets/问号.png');
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
</style>
